<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>分类</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--css文件-->
    <jsp:include page="common/common-css.jsp" />
</head>
<body>

<jsp:include page="common/common-mobileButton.jsp" />

<div class="main-wrapper">
    <!--页面导航栏组件-->
    <jsp:include page="common/common-header.jsp" />

    <main class="main-content">

        <div align="center">
            <!-- 分类名称 -->
            <c:choose>
                <c:when test="${empty typeName}">
                    <h3 class="breadcrumb-heading">全部分类</h3>
                </c:when>
                <c:otherwise>
                    <h3 class="breadcrumb-heading">${typeName}</h3>
                </c:otherwise>
            </c:choose>
        </div>

        <div class="shop-area section-space-y-axis-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="product-topbar">
                            <ul>
                                <li class="page-count">
                                    <span>
                                        <c:choose>
                                            <c:when test="${page.totalPage==0 || page.pageNumber==page.totalPage}">
                                                ${page.totalCount}
                                            </c:when>
                                            <c:otherwise>
                                                ${page.pageNumber * page.pageSize}
                                            </c:otherwise>
                                        </c:choose>
                                    </span> /
                                    <span>
                                        ${page.totalCount}
                                    </span>
                                </li>
                                <li class="product-view-wrap">
                                    <!-- 查看模式 -->
                                    <ul class="nav" role="tablist">

                                        <li class="grid-view" role="presentation">
                                            <a class="active" id="grid-view-tab" data-bs-toggle="tab"
                                               href="#grid-view" role="tab" aria-selected="true">
                                                <i class="fa fa-th"></i>
                                            </a>
                                        </li>

                                        <li class="list-view" role="presentation">
                                            <a id="list-view-tab" data-bs-toggle="tab" href="#list-view" role="tab"
                                               aria-selected="false" class="">
                                                <i class="fa fa-th-list"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane fade active show" id="grid-view" role="tabpanel"
                                 aria-labelledby="grid-view-tab">
                                <div class="product-grid-view row g-y-20">
                                    <c:forEach items="${page.list}" var="book">
                                        <!-- 商品信息循环 -->
                                        <div class="col-lg-3 col-md-4 col-sm-6">
                                            <div class="product-item">
                                                <div class="product-img">
                                                    <!-- 商品详细信息 -->
                                                    <a href="/bookmall/detail/${book.id}">
                                                        <!-- 商品图片 -->
                                                        <img class="primary-img" src="${book.cover}" alt="${book.name}">
                                                    </a>
                                                    <div class="product-add-action">
                                                        <ul>
                                                            <li>
                                                                <a class="quuickview-btn" onclick="viewBook(${book.id})" data-tippy="快速查看">
                                                                    <i class="pe-7s-look"></i>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" onclick="buy(${book.id})" data-tippy="加入购物车">
                                                                    <i class="pe-7s-cart"></i>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="product-content">
                                                    <!-- 书名 -->
                                                    <a class="product-name"
                                                       href="/bookmall/detail/${book.id}">${book.name}</a>
                                                    <!-- 价格 -->
                                                    <div class="price-box pb-1"><span
                                                            class="new-price">¥ ${book.price}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="list-view" role="tabpanel" aria-labelledby="list-view-tab">
                                <c:forEach items="${page.list}" var="book">
                                    <div class="product-list-view row g-y-30">
                                        <div class="col-12">
                                            <div class="product-item">
                                                <div class="product-img">
                                                    <!-- 商品详细信息 -->
                                                    <a href="/bookmall/detail/${book.id}">
                                                        <!-- 商品图片 -->
                                                        <img class="primary-img" src="${book.cover}" alt="${book.name}">
                                                    </a>
                                                </div>
                                                <div class="product-content">
                                                    <!-- 名称 -->
                                                    <a class="product-name"
                                                       href=/bookmall/detail/${book.id}">${book.name}</a>

                                                    <!-- 价格 -->
                                                    <div class="price-box pb-1">
                                                        <span class="new-price">¥ ${book.price}</span>
                                                    </div>

                                                    <!-- 介绍/简介 -->
                                                    <p class="short-desc mb-0">${book.mark}</p>
                                                    <div class="product-add-action">
                                                        <ul>
                                                            <li>
                                                                <a class="quuickview-btn" onclick="viewBook(${book.id})" data-tippy="快速查看">
                                                                    <i class="pe-7s-look"></i>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" onclick="buy(${book.id})" data-tippy="加入购物车">
                                                                    <i class="pe-7s-cart"></i>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>

                        <!-- 分页-->
                        <c:choose>
                            <c:when test="${!empty page.list}">
                                <jsp:include page="pagination.jsp">
                                    <jsp:param name="url" value="bookmall/types"></jsp:param>
                                    <jsp:param name="param" value="${typeUrl}"></jsp:param>
                                </jsp:include>
                            </c:when>

                            <c:otherwise>
                                <div style='text-align:center; color: #33cabb;'>暂时没有该分类的书籍...<a
                                        href="/bookmall/index">去看看别的?</a>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <!--页尾-->
    <jsp:include page="footer.jsp" />
</div>
<!--js文件-->
<jsp:include page="common/common-js.jsp" />
</body>
</html>
